<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
</head>

<body>
    <div id="app">
        <div class="count-down">
            {{beauty(hour)}}:{{beauty(min)}}:{{beauty(sec)}}
        </div>
    </div>
</body>
<script>
    var app = new Vue({
        el: "#app",
        data: {
            countTime: 10000,  //倒计时的时间(s)
            timer: null,
        },
        methods: {
            beauty(num) {
                return num < 10 ? "0" + num : num;
            },
            countDownHandler() {
                clearInterval(this.timer);
                this.timer = setInterval(() => {
                    this.countTime--;
                }, 1000)
            }
        },
        computed: {
            // 将倒计时的时间换算为天时分秒
            day: function () {
                return parseInt(this.countTime / (24 * 60 * 60));
            },
            hour: function () {
                // 总的时间 % 一天的时间 =>  不满一天的时间
                // 不满一天的时间 / 一小时
                return parseInt(this.countTime % (24 * 60 * 60) / (60 * 60))
            },
            min: function () {
                // 不满一小时 / 一分钟
                return parseInt(this.countTime % (60 * 60) / 60);
            },
            sec: function () {
                // 不满一小时 / 一分钟
                return this.countTime % 60;
            },
        },
        mounted() {
            this.countDownHandler();
        },
    })


</script>

</html>